<template>
  <el-dialog title="" :visible.sync="dialogVisible" width="80%">
    <div id="full" style="width:100%;height:500px;"></div>
  </el-dialog>
</template>
<script>
import Ecolors from "@/utils/chartsColors.js";
export default {
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      dialogVisible: false,
      // isHaveData:false,
      chartTwo: null,
      chartTwoData: {
        name: [],
        data: [],
        links: [],
      },
    };
  },
  mounted() {},
  methods: {
    init() {
      this.dialogVisible = true;
      let that = this;
      this.$nextTick(() => {
        that.chartTwo = this.$echarts.init(document.getElementById("full"));
        this.getPatentLegal();
        //  console.log(that.chartTwo)
      });
    },
    getPatentLegal() {
      this.$get(this.$Url.patent.patentLegal, {
        companyName: this.companyName,
        //dataType: "patentLegal"
      })
        .then((data) => {
          console.log(data);
          if (data.data) {
            let patentLegal = data.data;
            /* if(patentLegal.divertNum===0){
                this.isHaveData = false
                return
            } */

            // 转让许可 divert:转让 transfer:许可
            let optionObj = {
              tooltip: {
                trigger: "item",
                alwaysShowContent: false,
                enterable: true,
                confine: true,
                // position: ['10%', '10%'],
                formatter: (params) => {
                  let dataType = params.dataType;
                  if (dataType === "edge") {
                    let data = params.data.labelName;
                    let arr = data.split(",");
                    let str = "";
                    if (arr.length > 6) {
                      str +=
                        '<p style="width:180px;max-height:200px;margin-bottom:0;overflow-x:hidden;overflow-y:auto">';
                    } else {
                      str +=
                        '<p style="max-height:200px;margin-bottom:0;overflow-x:hidden;overflow-y:auto">';
                    }

                    for (let i = 0; i < arr.length; i++) {
                      if (
                        arr[i].indexOf("（转让）") > -1 ||
                        arr[i].indexOf("（许可）") > -1
                      ) {
                        let pn = arr[i].substr(0, arr[i].indexOf("（"));
                        str += `<a href='/#/assessment/patent/details?pn=${pn}&active=1' 
                                style='color:#fff;text-decoration: underline;cursor: pointer;'">${arr[i]}</a><br />`;
                      } else {
                        str += `${arr[i]}<br />`;
                      }
                    }
                    str += "</p>";
                    return str;
                  } else if (dataType === "node") {
                    return params.name;
                  }
                },
              },
              animationDurationUpdate: 1500,
              animationEasingUpdate: "quinticInOut",
              series: [
                {
                  type: "graph",
                  symbolSize: "20",
                  edgeSymbol: ["", "arrow"],
                  data: [],
                  links: [],
                  roam: true,
                  label: {
                    normal: {
                      show: true,
                      formatter: "{b}",
                    },
                  },
                  lineStyle: {
                    normal: {
                      color: "source",
                    },
                  },
                },
              ],
            };
            this.chartTwo.setOption(optionObj);

            // 获取关系图节点data参数
            let chartTwoData = {
              name: [],
              data: [],
              links: [],
            };
            for (let i = 0; i < patentLegal.transfer.node.length; i++) {
              let node = patentLegal.transfer.node[i];
              if (node !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            for (let j = 0; j < patentLegal.transfer.link.length; j++) {
              let node = patentLegal.transfer.link[j].target;
              if (node !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            for (let i = 0; i < patentLegal.divert.node.length; i++) {
              let node = patentLegal.divert.node[i];
              if (patentLegal.divert.node[i] !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            for (let j = 0; j < patentLegal.divert.link.length; j++) {
              let node = patentLegal.divert.link[j].target;
              if (patentLegal.divert.link[j].target !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            chartTwoData.name = Array.from(new Set(chartTwoData.name));

            let color = Ecolors.color;
            for (let i = 0; i < chartTwoData.name.length; i++) {
              let name = chartTwoData.name[i];
              // if(name.length>10){
              //   name = name.slice(0, 10) + '\n' + name.slice(10)
              // }
              // console.log(name)
              let obj = {
                name: name,
                labelName: name,
                label: {
                  position: "bottom",
                  color: "#222",
                  // color: '#fff'
                },
                // symbolOffset: ['-25%', 0]
              };
              if (i > 50) {
                obj = {
                  ...obj,
                  itemStyle: {
                    normal: {
                      color: color[i % 51],
                    },
                  },
                };
              } else {
                obj = {
                  ...obj,
                  itemStyle: {
                    normal: {
                      color: color[i],
                    },
                  },
                };
              }
              chartTwoData.data.push(obj);
            }
            if (chartTwoData.data.length <= 2) {
              // chartTwoData.data[1].symbolOffset = ['20%', 0]
              for (let i = 0; i < chartTwoData.data.length; i++) {
                chartTwoData.data[i].x = 50 + 5 * i;
                chartTwoData.data[i].y = 50;
              }
            } else {
              // for(let i=0;i<chartTwoData.data.length;i++){
              //   chartTwoData.data[i].x = 200+10*i
              //   chartTwoData.data[i].y = 100+4*i
              // }
            }

            // 如果nodes节点只有一个则不展示
            if (chartTwoData.data.length <= 1) {
              this.divertNum = 0;
              return;
            }

            this.chartTwoData.name = chartTwoData.name;
            this.chartTwoData.data = chartTwoData.data;

            // 获取关系图links参数
            let transferLinkData = JSON.parse(
              JSON.stringify(patentLegal.transfer.link)
            );
            for (let j = 0; j < transferLinkData.length; j++) {
              transferLinkData[j].pn2 = transferLinkData[j].pn;
              for (let k = j + 1; k < transferLinkData.length; k++) {
                if (
                  transferLinkData[j].src === transferLinkData[k].src &&
                  transferLinkData[j].target === transferLinkData[k].target
                ) {
                  transferLinkData[
                    j
                  ].pn2 += `（许可）,${transferLinkData[k].pn}`;
                  transferLinkData.splice(k, 1);
                  k--;
                }
              }

              let src = transferLinkData[j].src;
              let target = transferLinkData[j].target;
              if (src.length > 8) {
                src = src.slice(0, 8) + "\n" + src.slice(8);
              }
              if (target.length > 8) {
                target = target.slice(0, 8) + "\n" + target.slice(8);
              }

              let obj = {
                source: src,
                target: target,
                name: transferLinkData[j].pn2,
                labelName: `${transferLinkData[j].pn2}（许可）`,
                lineStyle: {
                  color: "#aaa",
                  curveness: "0.1",
                },
              };
              chartTwoData.links.push(obj);
            }

            let divertLinkData = JSON.parse(
              JSON.stringify(patentLegal.divert.link)
            );
            for (let j = 0; j < divertLinkData.length; j++) {
              divertLinkData[j].pn2 = divertLinkData[j].pn;
              for (let k = j + 1; k < divertLinkData.length; k++) {
                if (
                  divertLinkData[j].src === divertLinkData[k].src &&
                  divertLinkData[j].target === divertLinkData[k].target
                ) {
                  divertLinkData[j].pn2 += `（转让）,${divertLinkData[k].pn}`;
                  divertLinkData.splice(k, 1);
                  k--;
                }
              }

              let src = divertLinkData[j].src;
              let target = divertLinkData[j].target;
              if (src.length > 8) {
                src = src.slice(0, 8) + "\n" + src.slice(8);
              }
              if (target.length > 8) {
                target = target.slice(0, 8) + "\n" + target.slice(8);
              }

              let obj = {
                source: src,
                target: target,
                name: divertLinkData[j].pn2,
                labelName: `${divertLinkData[j].pn2}（转让）`,
                lineStyle: {
                  color: "#aaa",
                  curveness: "0.2",
                },
              };
              if (divertLinkData.length <= 1) {
                obj["lineStyle"] = {
                  color: "#aaa",
                };
              }
              chartTwoData.links.push(obj);
            }

            this.chartTwoData.links = chartTwoData.links;

            /* if(this.chartTwoData.data.length<=0||this.chartTwoData.links.length<=0){
              this.isHaveData = false
            }else{
              this.isHaveData = true
            } */
            let option = {};
            option = {
              animationDurationUpdate: 1500,
              animationEasingUpdate: "quinticInOut",
              series: [
                {
                  type: "graph",
                  //circular
                  layout: "circular",
                  draggable: true,
                  symbol: "circle",
                  // symbol: 'rect',
                  symbolSize: (value, params) => {
                    // return [36 + params.name.length * 10, 24]
                    return 24;
                    // return [140, 36]
                  },
                  edgeSymbol: ["", "arrow"],
                  edgeSymbolSize: [0, 10],
                  roam: true,
                  focusNodeAdjacency: false,
                  lineStyle: {
                    normal: {
                      color: "source",
                    },
                  },
                  data: this.chartTwoData.data,
                  links: this.chartTwoData.links,
                },
              ],
            };
            // 如何data数据较少，则不旋转标签
            if (this.chartTwoData.data.length <= 2) {
              option.series[0]["layout"] = "none";
              option.series[0]["width"] = "30%";
              option.series[0]["force"] = {
                // repulsion: 50,
                // edgeLength: 10,
                // edgeLength: [100, 160]
              };
            } else {
              option.series[0]["height"] = "90%";
              option.series[0]["top"] = "10";
              option.series[0]["force"] = {
                // repulsion: 50,
                // gravity: 0.1,
                // edgeLength: [60, 80]
              };
            }
            this.chartTwo.setOption(option);

            window.addEventListener("resize", () => {
              setTimeout(() => {
                this.chartTwo.resize();
              }, 400);
            });
          }
        })
        .catch((error) => {});
    },
  },
};
</script>
